<template>
  <el-container style="height: 1000px; border: 1px solid #eee">
    <el-main>
      <router-view/>
      <el-row>
        <el-col :span="8">
          <el-form :inline="true" :model="form0" class="demo-form-inline" style="float: left">
            <el-form-item label="姓名">
              <el-input v-model="form0.name" placeholder="咨询师" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :span="16">
          <el-button type="success" plain style="float: right" icon="el-icon-plus" @click="AddEvent">新增咨询师</el-button>
        </el-col>
      </el-row>

      <el-table :data="filteredList.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="font-size: 16px">
        <el-table-column type="index"
                         :index="indexFn"
                         prop="uid"
                         label="No." width="100" align="center">
        </el-table-column>
        <el-table-column label="id" prop="id" width="0" align="center" v-if="false"></el-table-column>
        <el-table-column  prop="userAvatar" width="50" align="center">
          <template #default="scope" >
            <el-avatar :src="scope.row.userAvatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="督导" prop="name" width="250" align="center"></el-table-column>
        <el-table-column label="绑定" prop="binding" width="350" align="center"></el-table-column>
        <el-table-column label="时长" prop="duration" width="160" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-tooltip
                class="item"
                effect="light"
                content="更改信息"
                placement="bottom"
            >
              <el-button type="primary" icon="el-icon-edit" circle @click="EditEvent(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :total="filteredList.length"
          :page-size="pageSize"
          @current-change="paging"
      >
      </el-pagination>
      <el-dialog title="请填写"
                 v-model="dialogVisible"
                 width="40%"
                 :before-close="handleClose">
        <el-form :model="form" class="demo-form-inline">
          <el-form-item  v-if="false">
            <el-input v-model="form.userId" label="id" placeholder="" disabled style="width: 320px"> </el-input>
          </el-form-item>
          <el-form-item label="姓名" :label-width="120">
            <el-input v-model="form.name" label="姓名" placeholder="咨询师" disabled style="width: 320px"> </el-input>
          </el-form-item>
          <el-form-item label="绑定咨询师" :label-width="120">
            <el-select v-model="form.consultants" filterable multiple placeholder="请选择"  style="width: 320px">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排班" :label-width="120">
            <el-checkbox-group v-model="form.defaultDuty" size="small">
              <el-checkbox-button v-for="duty in duties" :label="duty['value']" :key="duty['value']">
                {{duty["key"]}}
              </el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleEdit">更改</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 新增 -->
      <el-dialog
          v-model="dialogVisible2"
          width="40%"
          :before-close="handleClose">
        <h2>添加督导</h2>
        <el-tabs v-model="activeName" @tab-click="">
          <el-tab-pane label="个人信息" name="personal">
            <el-form :model="form2" :rules="rules" ref="form2">
              <el-row :gutter="10">
                <el-col :span="12"><el-form-item label="姓名" :label-width="120" prop="userName">
                  <el-input v-model="form2.userName" placeholder="咨询师" clearable style="width: 200px"> </el-input>
                </el-form-item></el-col>
                <el-col :span="12"><el-form-item label="证件号" :label-width="120" prop="userIdentity">
                  <el-input v-model="form2.userIdentity" placeholder="请输入证件号" clearable style="width: 200px"> </el-input>
                </el-form-item></el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12"><el-form-item label="性别" :label-width="120" prop="userGender">
                  <el-select v-model="form2.userGender" placeholder="请选择" style="width:200px">
                    <el-option
                        v-for="item in genders"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item></el-col>
                <el-col :span="12"><el-form-item label="年龄" :label-width="120" prop="userAge">
                  <el-input v-model.number="form2.userAge" placeholder="年龄" clearable style="width: 200px"> </el-input>
                </el-form-item></el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12"><el-form-item label="联系方式" :label-width="120" prop="userPhone">
                  <el-input v-model.number="form2.userPhone" placeholder="请输入联系方式" clearable style="width:200px"> </el-input>
                </el-form-item></el-col>
                <el-col :span="12"><el-form-item label="邮箱" :label-width="120" prop="userEmail">
                  <el-input v-model="form2.userEmail" placeholder="请输入邮箱" clearable style="width: 200px"> </el-input>
                </el-form-item></el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="工作信息" name="work">
            <el-form :model="form2" :rules="rules" ref="form2">
              <el-row :gutter="10">
                <el-col :span="12"><el-form-item label="用户名" :label-width="120" prop="userNickname">
                  <el-input v-model="form2.userNickname" placeholder="用户名" clearable style="width: 200px"> </el-input>
                </el-form-item></el-col>
                <el-col :span="12"><el-form-item label="初始密码" :label-width="120" prop="userPassword">
                  <el-input v-model="form2.userPassword" placeholder="初始密码" clearable style="width: 200px"> </el-input>
                </el-form-item></el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12"><el-form-item label="工作单位" :label-width="120" prop="userWorkPlace">
                  <el-input v-model="form2.userWorkPlace" placeholder="工作单位" clearable style="width:200px"> </el-input>
                </el-form-item></el-col>
                <el-col :span="12"><el-form-item label="职称" :label-width="120" prop="userPosition">
                  <el-input v-model="form2.userPosition" placeholder="职称" clearable style="width: 200px"> </el-input>
                </el-form-item></el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12"><el-form-item label="督导资质" :label-width="120" prop="supervisorTitle">
                  <el-input v-model="form2.supervisorTitle" placeholder="督导资质" clearable style="width:200px"> </el-input>
                </el-form-item></el-col>
                <el-col :span="12"><el-form-item label="资质编号" :label-width="120" prop="supervisorTitleId">
                  <el-input v-model="form2.supervisorTitleId" placeholder="资质编号" clearable style="width: 200px"> </el-input>
                </el-form-item></el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="handleAdd">提 交</el-button>
          </span>
        </template>
      </el-dialog>

    </el-main>
  </el-container>
</template>

<script>
const dutyOptions = [
  {key:'周一',value:1},
  {key:'周二',value:2},
  {key:'周三',value:3},
  {key:'周四',value:4},
  {key:'周五',value:5},
  {key:'周六',value:6},
  {key:'周日',value:7},
]
let checkPhone = (rule, value, callback) => {
  let reg = /^1[345789]\d{9}$/
  if (!reg.test(value)) {
    callback(new Error('请输入11位手机号'))
  } else {
    callback()
  }
}
let checkAge = (rule,value,callback)=>{
  if (value<=0 || value>120){
    callback(new Error('请输入正确的年龄'))
  }else{
    callback()
  }
}
const circleUrl = 'https://images.996pic.com/7021030b0ad843b9ab92571845d88fd1680_680.jpg'
export default {
  name: "AdminMentor",
  data(){
    return{
      activeName:'personal',
      checkboxGroup1:[],
      genders:[
        {value:0,label:'男'},
        {value: 1,label: '女'}
      ],
      options: [

      ],
      currentPage:1,
      pageSize:8,
      value: '',
      dialogVisible:false,
      dialogVisible2:false,
      valueFormat:'YYYY-MM-DD',
      format:'YYYY-MM-DD',
      page:0,
      duties:dutyOptions,
      form0:{
        name:''
      },
      form:{
        userId:'',
        name:'',
        consultants:[],
        defaultDuty:[]
      },
      form2:{
        userNickname: "",
        userName: "",
        userPhone: "",
        userGender: 0,
        userAge: 0,
        userIdentity: "",
        userEmail: "",
        userPassword: "",
        userWorkPlace: "",
        userPosition: "",
        supervisorTitle: "",
        supervisorTitleId:0
      },
      filteredList:[],
      dataList:[
        {
          id:1,
          name:'qwe',
          userAvatar:circleUrl,
          binding:['老王','老张','老徐'],
          total:1623,
          duration:'01:12:23',
          duty:'周一,周三,周五'
        },
        {
          id:2,
          name:'qwe',
          userAvatar:circleUrl,
          binding:['老王','老张','老徐'],
          total:1623,
          duration:'01:12:23',
          duty:'周一,周三,周五'
        },
        {
          id:3,
          name:'qwe',
          userAvatar:circleUrl,
          binding:['老王','老张','老徐'],
          total:1623,
          duration:'01:12:23',
          duty:'周一,周三,周五'
        },
      ],
      rules: {
        userNickname: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 2,
            max: 32,
            message: '长度在 2 到 32 个字符',
            trigger: 'blur',
          },
        ],
        userName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          {
            min: 2,
            max: 32,
            message: '长度在 2 到 32 个字符',
            trigger: 'blur',
          },
        ],
        userPhone:[
          {required:true, message:'请输入手机号',trigger: 'blur'},
          {type:'number',validator:checkPhone,message: '请输入正确格式的手机号',trigger: 'blur'}
        ],
        userIdentity: [
          { required: true, message: '请输入证件号', trigger: 'blur' },
          {
            min: 15,
            max: 18,
            message: '请输入正确格式的证件号',
            trigger: 'blur',
          },
        ],
        userAge: [
          {required:true, message:'请输入正确的年龄',trigger: 'blur'},
          {type:'number',validator:checkAge,message: '请输入正确的年龄',trigger: 'blur'}
        ],
        userEmail: [
          {required:true, message:'请输入邮箱',trigger: 'blur'},
          {type:'email',message: '请输入正确的邮箱',trigger: ['blur','change']}
        ],
        userPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 32,
            message: '长度在 6 到 32 个字符',
            trigger: 'blur',
          },
        ],
        userWorkPlace: [
          { required: true, message: '请输入工作单位', trigger: 'blur' },
          {
            min: 2,
            message: '长度在 2个字符以上',
            trigger: 'blur',
          },
        ],
        userPosition: [
          { required: true, message: '请输入职位', trigger: 'blur' },
          {
            min: 2,
            message: '长度在 2 个字符以上',
            trigger: 'blur',
          },
        ],
        supervisorTitle: [
          { required: true, message: '请输入督导职位', trigger: 'blur' },
          {
            min: 2,
            message: '长度在 2 个字符以上',
            trigger: 'blur',
          },
        ],
        supervisorTitleId: [
          { required: true, message: '请输入督导资质编号', trigger: 'blur' },
        ],

      },
    }
  },
  methods: {
    paging(val){
      const _this = this
      _this.currentPage = val
    },
    onSubmit() {
      const _this = this
      _this.filteredList = _this.filterList(_this.form0)
      console.log(this.form0)
    },
    handleEdit(){
      const _this = this
      _this.$confirm('确认编辑？')
          .then(async (_) => {
            console.log(_this.form.userId)
            console.log(_this.form.consultants)
            console.log(_this.form.defaultDuty)
            let duty = []
            for (let item of _this.form.defaultDuty) {
              duty.push(item)
            }
            console.log(duty)

            _this.dialogVisible = false
            await _this.$axios.post('http://106.14.247.163:8080/supervisor/changeDefaultDuty',
                {userId: _this.form.userId, defaultDuty: duty}).then(resp => {
              console.log(resp)
            })
            await _this.$axios.post('http://106.14.247.163:8080/supervisor/changeConsultant',
                {userId: _this.form.userId, consultants: _this.form.consultants}).then(resp => {
              console.log(resp)
            })

          })
    },
    handleClose(){
      this.$confirm('确认关闭？')
          .then((_) => {
            const _this = this
            _this.dialogVisible = false
            _this.dialogVisible2 = false
          })
          .catch((_) => {})
    },
    handleAdd(){
      this.$confirm('确认提交？')
          .then((_) => {
            const _this = this
            console.log(_this.form2)
            this.$refs['form2'].validate(async (valid) => {
              if (valid) {
                await _this.$axios.post('http://106.14.247.163:8080/supervisor/add', _this.form2).then(resp => {
                  console.log(resp)
                })
                _this.$message.success('提交成功！')
                _this.dialogVisible2 = false
              } else {
                _this.$message.warning('请检查填写项格式！')
                console.log('请检查填写项格式')
                _this.dialogVisible2 = false
                return false
              }
            })

            _this.dialogVisible2 = false
          })
          .catch((_) => {})
    },
    AddEvent(){
      const _this = this
      _this.dialogVisible2 = true
    },
    EditEvent(row){
      const _this = this
      _this.form.userId = row.id
      _this.form.name = row.name
      _this.checkboxGroup1 = [1,3,5]
      _this.form.duty = _this.checkboxGroup1
      _this.dialogVisible = true
    },
    indexFn(index) {
      index = (index + 1) + (this.currentPage-1) * this.pageSize
      return index
    },
    filterList(item) {
      const _this = this
      let newList = []
      if (item.name === '' || item.name===null) {
        return _this.dataList
      }

      else {
        console.log(_this.dataList)
        let l = []
        l = _this.dataList
        for(let i = 0,len = l.length;i<len;++i){
          let flag = false
          //console.log(l[i])
          let str = '.*?'+item.name+'.*'
          let reg = new RegExp(str)
          if (reg.test(l[i]['name'])){

          }else{
            flag = true
          }
          if (flag === false){
            newList.push(l[i])
          }
        }
        return newList
      }
    },

  },
  async created() {
    const _this = this
    await _this.$axios.get('http://106.14.247.163:8080/supervisor/getAllSupervisors').then(resp => {
      let res = resp.data.data
      _this.dataList = []
      for (let item of res) {
        if (item.userInfo === null || item.userInfo.userId === null || item.userInfo.userName === null) {
          continue
        }
        let bind = []
        for (let item2 of item.consultants){
          bind.push(item2.userInfo.userName)
        }
        _this.dataList.push({
          id: item.userInfo.userId,
          name: item.userInfo.userName,
          userAvatar: circleUrl,
          binding:bind,
          total: item.supervisorInfo.countTotal === null ? 0 : item.supervisorInfo.countTotal,
          duration: item.supervisorInfo.timeTotal === null ? 0 : item.supervisorInfo.timeTotal,
        })
      }
    })
    await _this.$axios.get('http://106.14.247.163:8080/consultant/getAllConsultants').then(resp => {
      for (let item of resp.data.data) {
        if (item.userInfo === null || item.userInfo.userId === null || item.userInfo.userName === null) {
          continue
        }
        _this.options.push({
          value: item.userInfo.userId,
          label: item.userInfo.userName
        })
      }
    })
    _this.filteredList = _this.dataList
  }
}
</script>

<style scoped>

</style>